<template>
	<view style="">
		<view style="position: relative;z-index: 0;">
			<image class="upper-bg" src="../../static/img/topmine.png"></image>
			<view :style="{paddingTop:statusBar+'px'}" class="tabNav" >
				<text :style="{lineHeight:navbar+'px'}" class="textNavigation">我的</text>
				<view class="userinfo flex" @click="toUserInfo">
					<image :src="ylUserInfo.avatar ? ylUserInfo.avatar : 'https://bzhl-dev1.oss-cn-chengdu.aliyuncs.com/bzhl/miniapp/yst/user.png'" mode=""></image>
					<text>{{ ylUserInfo.nickName ? ylUserInfo.nickName : ylUserInfo.levelName }}</text>
				</view>
			</view>

			<view class="flex topCard" v-if="ylUserInfo.type == '1'">
				<view class="flex cards orders" @click="toPage(`/pagesA/commonPage/index?type=4`)">
					<view class="flex flexColumn" style="width: 80%;">
						<text>技术推广</text>
						<text class="subText">点击查看二维码</text>
					</view>
					<u-icon name="arrow-right" color="#ccc" size="14"></u-icon>
				</view>
				<u-line direction="col" color="#eee" length="40%" margin="40rpx 0"></u-line>
				<view class="flex cards reports" @click="toPage('/pagesA/teacher/teacher')">
					<view class="flex flexColumn" style="width: 80%;">
						<text>收徒拜师</text>
						<text class="subText">点击查看记录表</text>
					</view>
					<u-icon name="arrow-right" color="#ccc" size="14"></u-icon>
				</view>
			</view>
		</view>
		<view class="u_cell" :style="ylUserInfo.type == '0' || ylUserInfo.type == null ? 'position: absolute;top: 440rpx;left: 3%;' : 'margin-top: 110rpx'">
			<view v-if="ylUserInfo.type == '0'" class="cell_item flex fjb" @click="toPage('/pagesA/teacher/teacher')">
				<text>收徒拜师</text>
				<view class="flex">
					<u-icon name="arrow-right" color="#ccc" size="14"></u-icon>
				</view>
			</view>
			<view v-for="(item,index) in cellList" :key="index">
				<view class="cell_item flex fjb" @click="toPage(item.url)">
					<text>{{ item.name }}</text>
					<view class="flex">
						<text style="color: #ccc;margin-right: 10rpx;">{{ item.subText }}</text>
						<u-icon v-if="item.name != '软件升级'" name="arrow-right" color="#ccc" size="14"></u-icon>
					</view>
				</view>
			</view>
			<view v-if="ylUserInfo.username != null" class="cell_item flex fjb" @click="logout">
				<text>退出登录</text>
				<view class="flex">
					<view style="color: #ccc;margin-right: 10rpx;">退出登录</view>
					<u-icon name="arrow-right" color="#ccc" size="14"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				navbar: 0, //状态栏高度
				statusBar: 0, // 状态栏高度 + 导航栏高度  
				customBar: 0, // 自定义标题与胶囊对齐高度
				cellList: [{
						name: '订单管理',
						url: '/pagesA/orders/orders'
					},
					{
						name: '地址管理',
						url: '/pagesA/address/address'
					},
					{
						name: '隐私条款',
						url: `/pagesA/commonPage/index?type=6`
					},
					{
						name: '用户反馈',
						url: '/pagesA/memberManage/userFeedBack'
					},
					{
						name: '软件升级',
						url: '/pagesA/memberManage/index',
						subText: '版本1.0'
					}
				]
			}
		},
		computed: {
			...mapState('user', ['ylUserInfo'])
		},
		mounted() {
			
			uni.getSystemInfo({
				success: (e) => {
					this.statusBar = e.statusBarHeight
					const custom = wx.getMenuButtonBoundingClientRect()
					this.customBar = custom.bottom + custom.top - e.statusBarHeight
					this.navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
				}
			})
		},
		methods: {
			...mapMutations('user', ['MusetToken','MusetUserInfo','MudelToken']),
			logout(){
				uni.reLaunch({
					url: '/pages/login/login'
				})
				this.MudelToken()
			},
			// 是否游客
			toUserInfo() {
				if(this.ylUserInfo.username) {
					uni.navigateTo({
						url: '../../pagesA/userinfo/userinfo'
					})
				} 
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.upper-bg {
		width: 750rpx;
		height: 468rpx;
	}

	.tabNav {
		position: absolute;
		top: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		color: #fff;

		.textNavigation {
			font-size: 34rpx;
		}

		.setting {
			width: 48rpx;
			height: 48rpx;
			margin-left: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.userinfo {
		position: absolute;
		top: 180rpx;
		width: 100%;
		align-items: center;
		flex-direction: column;

		image {
			width: 154rpx;
			height: 154rpx;
			border-radius: 50%;
		}

		text {
			margin-top: 20rpx;
		}
	}

	.topCard {
		position: absolute;
		top: 440rpx;
		left: 3%;
		width: 94%;
		height: 129rpx;
		margin: 0 auto;
		display: flex;
		background: #fff;
		border-radius: 32rpx;
		font-size: 32rpx;

		.cards {
			display: flex;
			// flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			border-radius: 0 !important;

			image {
				width: 48rpx;
				height: 60rpx;
			}

			text {
				margin-left: 20rpx;
			}

			.subText {
				color: #999;
				font-size: 28rpx;
			}
		}
	}


	.kefuBtn {
		width: 92%;
		height: 100rpx;
		position: absolute;
		opacity: 0;
	}
</style>